import React from 'react'
import { View } from '@tarojs/components'
import './MessagePlaceholder.scss'

function MessagePlaceholder({ itemCount = 9 }) {
  return (
    <View className="message-holder-page">
      {[...Array(itemCount)].map((item, index) => (
        <View className="message-holder-container" key={`${index}`}>
          <View className="avatar skeleton-blink" />
          <View className="right">
            <View className="right-item">
              <View className="row skeleton-blink title" />
              <View className="row skeleton-blink time" />
            </View>
            <View className="right-item">
              <View className="row skeleton-blink content" />
              <View className="row skeleton-blink" />
            </View>
          </View>
        </View>
      ))}
    </View>
  )
}

export default MessagePlaceholder
